<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>带搜索框的jQuery下拉框美化插件 searchableSelect</title>
    <link href="jquery.searchableSelect.css" rel="stylesheet" type="text/css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.transSelect.js"></script>
  </head>
  <body>
    <select>
      <option value="0">jQuery插件库</option>
      <option value="1">BlackBerry</option>
      <option value="2">device</option>
      <option value="3">with</option>
      <option value="4">entertainment</option>
      <option value="5">and</option>
      <option value="6">social</option>
      <option value="7">networking</option>
      <option value="8">apps</option>
      <option value="9">or</option>
      <option value="10">jQuery插件库</option>
      <option value="11">1BlackBerry</option>
      <option value="12">1device</option>
      <option value="13">1with</option>
      <option value="14">1entertainment</option>
      <option value="15">1and</option>
      <option value="16">1social</option>
      <option value="17">1networking</option>
      <option value="18">1apps</option>
      <option value="19">1or</option>
    </select>

    <button onclick="$('select').val(12).trigger('change');">改变</button>
    <script>
		$(function(){
			$('select').searchableSelect({
                title:'标题：',
                afterSelectItem:function (e) {
                    var seValue = this.currentSelectedItem.attr('data-value');
                    var seName = this.currentSelectedItem.text();
                    console.log(seValue,seName);
                }
            });

		});
    </script>
  </body>
</html>